<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>第五元素购物</title>
<link rel="stylesheet" href="../../css/userinfo.css" type="text/css" media="all" />
</head>
<body>
	<!-- 1.工具栏-->
	<div id="toolbar">
		<div id="div_1">
			<!-- 欢迎语-->
			<div id="d1_welcom">
				<span>欢迎来第五元素购物商城!</span>
			</div>
			<!-- 功能按钮-->
			<div id="d1_login">
				<ul>
					<li><a href="login.html">[登录]</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="register.html">[免费注册]</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="">我的订单</a></li>
					<li><img src="../../images/welcom_1.gif" alt="" /></li>
					<li><a href="">购物车0件</a></li>
				</ul>
			</div>

		</div>

	</div>

	<!-- 2.图片 -->
	<div id="div_2">

		<img src="../../images/img.gif" alt="" />

	</div>

	<!--3. logo-->
	<div id="div_3">
		<div id="d3_logo">
			<img src="../../images/logo.gif" alt="" />
		</div>

		<div id="d3_find">
			<ul id="d3_ul1">
				<li><input type="text" name="输入" /></li>
				<li><a href="">搜索</a></li>
			</ul>
			<ul id="d3_ul2">
				<li><a href="">电脑数码</a></li>
				<li><a href="">家电通讯</a></li>
				<li><a href="">丽人专区</a></li>
				<li><a href="">名仕专区</a></li>
				<li><a href="">生活专区</a></li>
				<li><a href="">图书音像</a></li>

			</ul>
		</div>

	</div>

	<!--4.导航-->
	<div id="div_4">
		<div id="d4_ng">
			<ul>
				<li><a href="">全部商品分类</a></li>
				<li><a href="Index.html">首页</a></li>
				<li><a href="">论坛</a></li>
				<li><a href="">留言板</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">在线游戏</a></li>
			</ul>
		</div>
	</div>
	<!--5.中间代码部分-->

	<div id="center_userinfo">
	<fieldset ><legend ><font color="red">个人资料</font></legend> 
	<form action="sucess.jsp" name="form1"  onsubmit="return check()">
		<div class="center_item">
			<label class="center_item_label">用户名:</label> <input type="text"
				class="center_item_text" name="name" id="name"></input> <span
				class="valid"></span>
			<p class="zhushi">用户名必须在四到二十个字符之间</p>
		</div>
		<div class="center_item">
			<label class="center_item_label">昵称:</label> <input type="text"
				class="center_item_text" name="nick" id="nick"></input> <span
				class="valid"></span>
			<p class="zhushi">昵称最大长度不超过六个字符</p>
		</div>
		
		<div class="center_item">
			<label class="center_item_label">邮箱：</label> <input type="text"
				class="center_item_text" name="email" id="email"></input> <span
				class="valid"></span>
			<p class="zhushi">邮箱必须以@qq.com或者163.com结束</p>
		</div>
		<div class="center_item">
			<label class="center_item_label">联系电话:</label> <input type="text"
				class="center_item_text" name="telphone"  id="telphone"></input> <span
				class="valid"></span>
			<p class="zhushi">联系电话必须为十一位数字</p>
		</div>
		<div class="center_item">
			<label class="center_item_label">等级：</label><label 
				class="center_item_label" ></label>
		</div>
		<div class="center_item">
			<label class="center_item_label">积分：</label><label 
				class="center_item_label" ></label>
		</div>
		<div class="center_item">
			<label class="center_item_label">余额：</label><label 
				class="center_item_label"></label>
		</div>
		<div class="center_item">
			<input type="submit" class="center_item_button" id="button1"
				value="修改信息"></input> <input type="reset" class="center_item_button"
				id="button1" value="重新填写"></input>
		</div>
		</form>
		</fieldset>
	</div>
	
	<!--6.底部代码-->
	<div id="Footer">
		<p>第五元素制作</p>
		<p>制作交流QQ群:259772627</p>
	</div>

	<script type="text/javascript">
	
		<!--姓名验证部分-->
		
		
        		var txtName = document.getElementById("name");
        		var spanName = txtName.parentNode.getElementsByTagName("span")[0];

        		txtName.onfocus = function () {

            		spanName.innerHTML = "";
            		spanName.className = "valid";
        	};
        	txtName.onblur = function () {

        		var getname = txtName.value.trim();
    			if (getname.length == 0) {
        			spanName.innerHTML = "名字是必填的";
        			spanName.className = "valid error";
        			return;
    			}
    			if (getname.length > 20) {
        			spanName.innerHTML = "名字最多20个字符";
        			spanName.className = "valid error";
        			return;
    			}
    			if (getname.length < 4) {
        			spanName.innerHTML = "名字最少4个字符";
        			spanName.className = "valid error";
        			return;
    			}
    			spanName.innerHTML = "&nbsp;";
    			spanName.className = "valid right";
    	};
    	
    	<!--昵称验证部分-->
    	var txtNiCk = document.getElementById("nick");
		var spanNiCk = txtNiCk.parentNode.getElementsByTagName("span")[0];

		txtNiCk.onfocus = function () {

			spanNiCk.innerHTML = "";
    		spanNiCk.className = "valid";
	};
	txtNiCk.onblur=function(){
		 var getnick = txtNiCk.value.trim();

			if (getnick.length == 0) {
				spanNiCk.innerHTML = "昵称是必填的";
 			spanNiCk.className = "valid error";
 			return;
			}
			if (getnick.length > 8) {
				spanNiCk.innerHTML = "昵称最多8个字符";
 			spanNiCk.className = "valid error";
 			return;
			}
			spanNiCk.innerHTML = "&nbsp;";
			spanNiCk.className = "valid right";
	    };
	    
	    <!--密码验证部分-->
	    var txtpassword = document.getElementById("password");
		var spanpassword = txtpassword.parentNode.getElementsByTagName("span")[0];
		var pwd =null;

		txtpassword.onfocus = function () {

			spanpassword.innerHTML = "";
			spanpassword.className = "valid";
	};
	txtpassword.onblur = function () {
		pwd = txtpassword.value.trim();

		if (pwd.length == 0) {
			spanpassword.innerHTML = "密码是必填的";
			spanpassword.className = "valid error";
			return;
		}

		var pwdReg = /^[A-Za-z0-9]{6,18}$/;
		if (!pwdReg.test(pwd)) {
			spanpassword.innerHTML = "密码只能是6-18位英文或数字";
			spanpassword.className = "valid error";
	 			return;
		}

		spanpassword.innerHTML = "&nbsp;";
		spanpassword.className = "valid right";
};
<!--密码验证部分的验证-->
var txtdoublepassword = document.getElementById("doublepassword");
var spandoublepassword = txtdoublepassword.parentNode.getElementsByTagName("span")[0];

txtdoublepassword.onfocus = function () {

	spandoublepassword.innerHTML = "";
	spandoublepassword.className = "valid";
};

txtdoublepassword.onblur = function () {
Dpwd=txtpassword.value.trim();
};
txtdoublepassword.onblur = function () {
var Dpwd = txtdoublepassword.value.trim();
if (Dpwd.length == 0) {
	spandoublepassword.innerHTML = "确认密码必须填";
	spandoublepassword.className = "valid error";
	return;
}
if (!(Dpwd.equals(pwd))) {
	spandoublepassword.innerHTML = "确认密码错误";
	spandoublepassword.className = "valid error";
	return;
}
	
spandoublepassword.innerHTML = "&nbsp;";
spandoublepassword.className = "valid right";
};

<!--邮箱验证部分-->
var txtemail = document.getElementById("email");
var spanemail = txtemail.parentNode.getElementsByTagName("span")[0];

txtemail.onblur = function () {

	spanemail.innerHTML = "";
	spanemail.className = "valid";
};
txtemail.onblur = function () {
var email = txtemail.value.trim();

if (email.length == 0) {
	spanemail.innerHTML = "Email是必填的";
	spanemail.className = "valid error";
	return;
}

var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!emailReg.test(email)) {
	spanemail.innerHTML = "不正确的Email格式";
	spanemail.className = "valid error";
	return;
}

spanemail.innerHTML = "&nbsp;";
spanemail.className = "valid right";
};
<!--电话号码验证部分-->
var txttelphone = document.getElementById("telphone");
var spantelphone = txttelphone.parentNode.getElementsByTagName("span")[0];

txttelphone.onblur = function () {

	spantelphone.innerHTML = "";
	spantelphone.className = "valid";
};
txttelphone.onblur = function () {
var telphone = txttelphone.value.trim();

if (telphone.length == 0) {
	spantelphone.innerHTML = "telphone是必填的";
	spantelphone.className = "valid error";
	return;
}
var telphoneReg = /^[0-9]{11}$/;
if (!telphoneReg.test(telphone)) {
	spantelphone.innerHTML = "不正确的telphone格式";
	spantelphone.className = "valid error";
	return;
}

spantelphone.innerHTML = "&nbsp;";
spantelphone.className = "valid right";
};

function check(){
	
	var pwdReg = /^[A-Za-z0-9]{6,18}$/;
	var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
	var telphoneReg = /^[0-9]{11}$/;
	if(document.form1.name.value==""||document.form1.name.value.length>18||document.form1.name.value.length<4){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	if(document.form1.nick.value==""||document.form1.nick.value.length>8){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	if(document.form1.password.value==""||!(pwdReg.test(document.form1.password.value))){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	if(document.form1.doublepassword.value==""||document.form1.doublepassword.value!=document.form1.password.value){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	if(document.form1.email.value==""||!(emailReg.test(document.form1.email.value))){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	if(document.form1.telphone.value==""||!(telphoneReg.test(document.form1.telphone.value))){
		window.alert("您的注册信息存在错误，请检查");
		return false;
	}
	return true;
}
var button2 = document.getElementById("button2");
button2.addEventListener("mouseclick","index.jsp",true);
        </script>
</body>
</html>